<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <title>Document</title>
    <style></style>
</head>
<body>
    <tbody>
        <tr>
            <td>
                Nickname
            </td>
            <td>
                <input type="text" id="user">
            </td>
        </tr>
        <tr>
            <td>
                Room number
            </td>
            <td>
                <input type="text" id="room">
            </td>
        </tr>
        <tr>
            <td>
                <button id="btn">Enter</button>
            </td>
        </tr>
    </tbody>
</body>
<script>
    
    let btn = document.getElementById("btn");
    let originUser = document.getElementById("user");
    let originRoom = document.getElementById("room");
    function clearCookie(){
        var cookies = document.cookie.split("; ");
        for (var c = 0; c < cookies.length; c++) {
            var d = window.location.hostname.split(".");
            while (d.length > 0) {
                var cookieBase = encodeURIComponent(cookies[c].split(";")[0].split("=")[0]) + '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; domain=' + d.join('.') + ' ;path=';
                var p = location.pathname.split('/');
                document.cookie = cookieBase + '/';
                while (p.length > 0) {
                    document.cookie = cookieBase + p.join('/');
                    p.pop();
                };
                d.shift();
            }
        }
    }
    btn.addEventListener("click",function(){
        if( originUser.value==="" || originRoom.value===""){
            alert('Please enter nickname or room number')
            return;
        }
            let webSocket = new WebSocket("ws://"+document.domain+":8081");
            webSocket.onopen = function() {
                webSocket.send(JSON.stringify({
                room : originRoom.value,
                user : originUser.value
            }))
            webSocket.onmessage = function(message){
                let Message = JSON.parse(message.data);
                console.log(originRoom.value)
                if(Message.room===undefined){
                    console.log();
                    if(Message[originRoom.value]!=="undefined"){
                        if(Message[originRoom.value][0]!==originUser.value&&Message[originRoom.value][1]!==originUser.value){
                        originRoom.value=""
                        alert("room is full")
                        clearCookie();
                    }
                    
                    else{
                        console.log(message)
                        setCookie({
                        room : originRoom.value,
                        user : originUser.value,
                    },7);
                    function setCookie(json,time){
                        let data = new Date(new Date().getTime() + time*24*60*60*1000).toUTCString();
                        for(let key in json){
                            document.cookie = key + "=" + json[key] + ";expires=" + data;
                        }
                    }

                        window.location.href="index.html";
                    }
                }
                }
            }
        }
    })
</script>
        <script src="test/system.test.js"></script>

</html>
